<template>
    <div class="slot">
        <!-- {{ a }} -->
        <slot v-bind="{ foo: 111, bar: 222 }" :abb="1" s="333" id="ids">
            defalut slot
        </slot>

        <slot name="color" v-bind="bind">
            green
        </slot>

        <h1 class="green">
            {{ color }}--{{ name }}
        </h1>

        {{ swg }}
        ??
        {{ f }},{{ c }}


        <div ref="btna" type="primary" @click="add"><span>{{ b }}</span></div>


        <el-pagination :page-sizes="[100, 200, 300, 400]" :background="true"
            layout="total, sizes, prev, pager, next, jumper" :total="400" />

        <el-button type="primary">primary</el-button>

        <el-button type="success">success</el-button>

        <el-button type="warning">warning </el-button>

        <el-button type="danger">danger</el-button>


    </div>


</template>


<script setup lang="ts">

const swg = inject('swg')

const { f, c } = toRefs(swg.value)

const { color = 'red', name } = defineProps<
    {
        color?: string,
        name: string
    }
>()
const a = ref(1)
const b = ref(1)

const btna = useTemplateRef('btna')

const add = async () => {

    ElMessage({
        type: 'info',
        message: 'bbb',

    })
    b.value++
    // await nextTick()
    console.log(btna.value?.innerHTML)
    console.log(b.value, 7777)

}
const bind = [1, 2, 3]
defineExpose({
    a,
    add
})

watch(() => name, (v) => {
    console.log(v);
}, { immediate: true })


</script>

<style lang="scss" scoped></style>